import React from "react";
import type {MenuProps} from "antd";
import {Menu} from "antd";
import {useSnapshot} from "valtio";
import {UserFz} from "../stores/UserFz";
import {useNavigate} from "react-router-dom";

const App: React.FC = () => {
    const store = useSnapshot(UserFz);
    const navigate = useNavigate();
    const onClick: MenuProps["onClick"] = ({key}) => {
        let label: string = "";
        for (let menu of store.menus) {
            if (label) break;
            for (let child of menu.children) {
                if (label) break;
                for (let grandson of child.children) {
                    if (grandson.key === key) {
                        label = grandson.label;
                        break;
                    }
                }
            }
        }
        store.setCurrentPage({label});
        navigate("/" + key);
    };
    return (
        <Menu
            className="h-full"
            theme={"dark"}
            onClick={onClick}
            defaultSelectedKeys={["workbench"]}
            defaultOpenKeys={["home", "Workbench"]}
            mode="inline"
            items={store.menus}
        />
    );
};

export default App;
